<template>
	<view class="play-list">
		<uni-nav-bar leftIcon="arrow-left" rightIcon="search" title="歌单" leftWidth="40rpx" rightWidth="40rpx"
			fixed="true" @clickLeft="back" @clickRight="search" statusBar>
		</uni-nav-bar>
		<view class="play-list-content">
			<uni-list>
				<uni-list-item v-for="(item,i) in playList" :key="i" :title="item.name" :note="artists[i]"
					clickable @click="goSong(item.id,i)">
				</uni-list-item>
			</uni-list>
		</view>
		<player></player>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				playList: [],
				artists: []
			}
		},
		computed: {
			...mapState(['url'])
		},
		methods: {
			...mapMutations(['changeMusicList','changeArtists','setDetail']),
			...mapActions(['getAudioSrc']),
			back() {
				uni.navigateTo({
					url: '../index/index',
				});
			},
			search() {
				uni.navigateTo({
					url: '../search/search',
				});
			},
			goSong(songId,i){
				this.changeMusicList(this.playList)
				this.changeArtists(this.artists)
				this.setDetail(this.playList[i])
				// this.setSongId(songId)
				this.getAudioSrc(songId)
			}
		},
		onLoad(option) {
			if (!option.id) {
				this.back()
			}
			uni
				.request({
					url: this.url + `/playlist/detail?id=${option.id}`
				})
				.then((res) => {
					this.playList = res.data.playlist.tracks
					// console.log(this.playList);
					for (let item of this.playList) {
						let artistName = ''
						for (let a of item.ar) {
							artistName += a.name + '/'
						}
						artistName = artistName.substring(0, artistName.length - 1)
						this.artists.push(artistName)
					}
				})
				.catch((err) => {
					console.error(err);
				});
		}
	}
</script>

<style lang="scss">
	.play-list-content {
		padding-bottom: 100rpx;
	}
</style>
